<!-- 邀请验证 -->
<template>
    <a-modal
      :zIndex="config_.zIndex"
      :width="config_.width"
      :title="config_.title"
      :visible="config_.visible"
      :confirm-loading="config_.loading"
      @cancel="handleCancel"
      :footer="null"
      wrapClassName="Invitation-Verification-con"
    >
      <div class="ivc-body">
        <div class="body-item">
          <div class="title">{{data_.dxTitle}}</div>
          <div class="data" >
            <div class="data-box" v-html="data_.dxContent"></div>
          </div>
          <div class="btn-group">
            <a-button type="primary" @click.prevent="sendEvent">发送短信  </a-button>
          </div>
        </div>
        <div class="body-item">
          <div class="title">{{data_.ewmTitle}}</div>
          <div class="data">
            <img class="img" :src="getBaseUrl(data_.ewmContent)" alt="二维码图片">
          </div>
          <div class="btn-group">
            <a-button type="primary" @click.prevent="copyCodeEvent">下载二维码  </a-button>
          </div>
        </div>
      </div>
    </a-modal>
</template>

<script>
import QRious from 'qrious'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'InvitationVerification',
  components: {},
  props: {
    config: {
      type: Object, default: {
        title:'核验邀请',
        visible:false,
        loading:false,
        width:800,
        zIndex:100000
      }
    },
    data:{
      type: Object,
      default:{
        dxTitle:'短信邀请法人确认撤销', //短信标题
        dxContent:'尊敬的#企业名称#，您正在进行撤销开票申请，请点击链接确认要撤销发票的内容！<br/><font color="#4266e5">#链接#</font>', // 短信内容
        ewmTitle:'法人扫码完成确认撤销', // 二维码标题
        ewmContent:'链接', // 二维码内容
      }
    },
    event:{type:Function}
  },
  data() {
    // 这里存放数据
    return {
      config_:{
        title:'核验邀请',
        visible:false,
        loading:false,
        width:800,
        zIndex:1000
      },
      data_:{
        dxTitle:'', //短信标题
        dxContent:'', // 短信内容
        ewmTitle:'', // 二维码标题
        ewmContent:'', // 二维码内容
        ewmURL:'', //
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    config: {
     handler(val) {
      if(!this.isType.isNullOrUnDef(val)){
       this.config_ = {...this.config_,...val}
      }
     },
     deep: true,
     immediate: true
    },
    data: {
     handler(val) {
      if(!this.isType.isNullOrUnDef(val)){
       this.data_ = val
      }
     },
     deep: true,
     immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    /**
     * 拷贝二维码
     */
    copyCodeEvent(){
      this.event && this.event('CopyQRCode',this.config.visible)
    },
    /**
     * 发送短信
     */
    sendEvent(){
      this.event && this.event('send',this.config.visible)
    },
    handleCancel(){
      this.config.visible = false
      this.event && this.event('close',this.config.visible)
    },
    /**
     * 获取二维码
     * @param {*} url
     */
    getBaseUrl(url){
      var qr = new QRious({
        // background: 'green',
        // backgroundAlpha: 0.8,
        // foreground: 'blue',
        // foregroundAlpha: 0.8,
        level: 'H',
        // padding: 5,
        // size: 100,
        value: url
      });
      this.data_.ewmURL = qr.toDataURL()
      return this.data_.ewmURL
    },
  },
  }
</script>
<style lang='less' >
.Invitation-Verification-con{
  .ant-modal-title{
    text-align:left
  }
  .ivc-body{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .body-item{
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      padding: 0 10px;
      .title{
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        padding: 5px 0;
      }
      .data{
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
        .data-box{
          width: 95%;
          height: 100%;
          border: 1px solid #c3c3c3;
          border-radius: 5px;
          padding: 5px;
          // display: flex;
          // justify-content: center;
          // align-items: center;
          font-size: 16px;
        }
      }
      .btn-group{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .body-item:nth-child(1){
      flex: 6;
    }
    .body-item:nth-child(2){
      flex: 3;
      border-left: 1px solid #c3c3c3;
    }
  }
}

</style>

